<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Logcat Viewer</title>
  <link rel="stylesheet" href="/static/css/logcat.css">
  <link rel="stylesheet"
        href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <script defer src="/static/js/logcat.js"></script>
</head>

<body class="light-mode">
  <div id="controls">
    <div>
      <label for="file-upload-button" class="google-button">
        <i class="material-icons">upload_file</i> Upload
      </label>
      <input type="file" id="file-upload-button" class="hidden-element">
    </div>

    <div>
      <label for="paste-logcat-button" class="google-button">
        <i class="material-icons">content_paste</i> Paste
      </label>
      <input type="button" id="paste-logcat-button" class="hidden-element">
    </div>

    <div class="dropdown">
      <div id="dropdown-header-process" class="dropdown-header">
        <i class="material-icons">memory</i> Processes
      </div>
      <ol id="dropdown-list-process" class="dropdown-list hidden-element">
        <input type="text" placeholder="Search processes..."
               id="dropdown-search-process" class="dropdown-search-input">
        <li id="display-all-process-li" data-value="all"
            data-type="main-process" class="dropdown-item selected">
          <input id="display-all-process-checkbox" type="checkbox" checked>
          <label>Display All Processes</label>
        </li>
        <li id="display-named-process-li" data-value="named"
            data-type="main-process" class="dropdown-item selected">
          <input id="display-named-process-checkbox" type="checkbox" checked>
          <label>Display All Named Processes</label>
        </li>
      </ol>
    </div>

    <div class="dropdown">
      <div id="dropdown-header-tag" class="dropdown-header">
        <i class="material-icons">label</i> Tags
      </div>
      <ol id="dropdown-list-tag" class="dropdown-list hidden-element">
        <input type="text" placeholder="Search tags..."
               id="dropdown-search-tag" class="dropdown-search-input">
        <li id="display-all-tag-li" data-value="all" data-type="main-tag"
            class="dropdown-item selected">
          <input id="display-all-tag-checkbox" type="checkbox" checked>
          <label>Display All Tags</label>
        </li>
      </ol>
    </div>

    <div class="dropdown">
      <div id="dropdown-header-priority" class="dropdown-header">
        <i class="material-icons">warning</i> Priorities
      </div>
      <ol id="dropdown-list-priority" class="dropdown-list hidden-element">
        <li id="display-all-priority-li" data-value="all"
            data-type="main-priority" class="dropdown-item selected">
          <input id="display-all-priority-checkbox" type="checkbox" checked>
          <label>Display All Priorities</label>
        </li>
        <li data-value="V" data-type="priority" class="dropdown-item selected">
          <input type="checkbox" checked>
          <label>Verbose</label>
        </li>
        <li data-value="D" data-type="priority" class="dropdown-item selected">
          <input type="checkbox" checked>
          <label>Debug</label>
        </li>
        <li data-value="I" data-type="priority" class="dropdown-item selected">
          <input type="checkbox" checked>
          <label>Info</label>
        </li>
        <li data-value="W" data-type="priority" class="dropdown-item selected">
          <input type="checkbox" checked>
          <label>Warning</label>
        </li>
        <li data-value="E" data-type="priority" class="dropdown-item selected">
          <input type="checkbox" checked>
          <label>Error</label>
        </li>
        <li data-value="F" data-type="priority" class="dropdown-item selected">
          <input type="checkbox" checked>
          <label>Fatal</label>
        </li>
        <li data-value="S" data-type="priority" class="dropdown-item selected">
          <input type="checkbox" checked>
          <label>Silent</label>
        </li>
      </ol>
    </div>

    <div class="google-button arrow-controls">
      <i class="material-icons">error</i>
      <span id="exception-feedback"
            class="arrow-feedback">Exceptions (0/0)</span>
      <i id="prev-exception-button"
         class="material-icons arrow">keyboard_arrow_up</i>
      <i id="next-exception-button"
         class="material-icons arrow">keyboard_arrow_down</i>
    </div>

    <div class="google-button arrow-controls">
      <i class="material-icons">rule</i>
      <span id="test-feedback" class="arrow-feedback">Tests (0/0)</span>
      <i id="prev-test-button"
         class="material-icons arrow">keyboard_arrow_up</i>
      <i id="next-test-button"
         class="material-icons arrow">keyboard_arrow_down</i>
    </div>

    <div class="dropdown">
      <div id="dropdown-header-settings" class="dropdown-header">
        <i class="material-icons">settings</i> Settings
      </div>
      <ol id="dropdown-list-settings" class="dropdown-list hidden-element">
        <li class="dropdown-item">
          <input type="checkbox" id="hide-date-time-checkbox">
          <label>Hide Date & Time</label>
        </li>
        <li class="dropdown-item">
          <input type="checkbox" id="wrap-text-checkbox">
          <label>Wrap Lines</label>
        </li>
        <li class="dropdown-item selected">
          <input type="checkbox" id="display-non-logcat-checkbox" checked>
          <label>Show Non-Logcat Lines</label>
        </li>
        <li class="dropdown-item selected">
          <input type="checkbox" id="always-show-activity-manager-checkbox"
                 checked>
          <label>Always Show ActivityManager</label>
        </li>
        <li class="dropdown-item">
          <input type="checkbox" id="toggle-dark-mode-checkbox">
          <label>Dark Mode</label>
        </li>
      </ol>
    </div>

    <div id="help-button" class="google-button">
      <i class="material-icons">help_outline</i> Help
    </div>
  </div>

  <div id="text-display-area" class="not-wrap-text">
    <div>Please wait while the logcat is being fetched...</div>
  </div>

  <div id="help-dialog" class="hidden-element">
    <p>If you find a bug, please submit a bug ticket here:</p>
    <a href="https://issues.chromium.org/issues/new?component=1925810"
       target="_blank">
      Submit Bug
    </a>
    <button id="help-dialog-ok-button" class="google-button">OK</button>
  </div>
</body>

</html>